<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <script src="../js/vue.js" type="text/javascript"></script>
  <body>
    <!-- 
				v-for指令:
						1.用于展示列表数据
						2.语法：v-for="(item, index) in xxx" :key="yyy"
						3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
    <div id="app">
      <h2>{{msg}}</h2>
      
      <!-- 遍历数组 -->
      <h2>人员列表（遍历数组）</h2>
      <ul>
        <li v-for="(p,index) of persons" :key="index">
          {{p.name}}-{{p.age}}
        </li>
      </ul>

      <!-- 遍历对象 -->
       <h2>汽车信息（遍历对象）</h2>
       <ul>
        <li v-for="(value, k) of car" :key="k">
          {{k}}-{{value}}
        </li>
       </ul>

       <!-- 遍历字符串 -->
        <h2>测试遍历字符串（用的少）</h2>
        <ul>
          <li v-for="(char, index) of str" :key="index">
            {{char}}-{{index}}
          </li>
        </ul>

        <!-- 遍历指定次数 -->
         <h2>测试遍历指定次数（用的少）</h2>
         <ul>
          <li v-for="(number, index) of 5" :key="index">
            {{index}}-{{number}}
          </li>
         </ul>
    </div>
  </body>
  <script>
    const vm = new Vue({
      el: "#app",
      data: {
        msg: "列表渲染_基本列表",
        persons: [
          { id: "001", name: "张三", age: 18 },
          { id: "002", name: "李四", age: 19 },
          { id: "003", name: "王五", age: 20 },
        ],
        car: {
          name: "奥迪A8",
          price: "70万",
          color: "黑色",
        },
        str:'hello'
      },
    });
  </script>
</html>
